<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="65%" append-to-body :before-close="closeDelDialog">
      <el-radio-group v-model="radio" @change="getRadio">
        <el-radio v-for="item in radioOption" :value="item.value" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>

      <el-table :data="tableDataList" border align="center" header-align="center" height="400" :loading="loading" style="margin-top: 1%; overflow-y: auto">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" :index="table_index" width="55" align="center" prop="fileId"/>
        <el-table-column label="文件名称" prop="fileName" align="center" />
        <el-table-column label="保管期限" prop="bgqx" align="center" />
<!--        <el-table-column label="利用控制范围" prop="isOpens" align="center" />-->
        <el-table-column label="文件类型" prop="wjlx" align="center" />
        <el-table-column label="人员部门" prop="deptName" align="center" />
        <el-table-column label="人员名称" prop="userName" align="center" />
        <el-table-column label="专业" prop="majorId" align="center" />
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="distribute(scope.row)">分配人员</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-dialog>

    <el-dialog :title="personalTitle" :visible.sync="personalOpen" width="30%" append-to-body>
      <div style="overflow-y: auto; height: 250px">
        <el-input v-model="roleName" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                  style="margin-bottom: 20px; width: 90%" :style="isSize" />
        <el-tree ref="roleTree" v-model="userId" :data="roleTree" node-key="id" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
                 @node-click="roleClick" >
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPersonal">确 定</el-button>
        <el-button @click="personalCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {
  getMajors,
  getPersonList,
  deptUserTree,
  deptTreeSelect,
  setUpUser, findByDeptUserTree
} from "@/api/stage/stageManagement/phaseConfiguration";

export default {
  name: "assignPersonnel",
  props: ["title","open"],
  archive_Dicts: ['BGQX', 'IS_OPENS', 'WJLX', 'XMJD'],
  data() {
    return {
      deptOption: [],
      radio: '',
      radioOption: [],
      // 表格数据
      tableDataList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableHeight: "",

      personalTitle: '',
      personalOpen: false,
      roleTree: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      processId: '',
      userId: '',
      roleName: undefined,
      deptId: undefined
    }
  },
  watch: {
    // 根据名称筛选角色树
    roleName(val) {
      this.$refs.roleTree.filter(val);
    },
  },
  computed: {
    isSize() {
      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }
  },
  methods: {
    init(val) {
      console.log(val)
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.queryParams.projectExamplesId  = val.projectExamplesId
      this.deptId = val.deptId
      getMajors(val).then(response=>{
        this.radioOption = response.data.select.map(item=> {
          return {
            value: item.majorId,
            label: item.majorName
          }
        })
        if(this.radioOption.length > 0) {
          this.$set(this, 'radio', this.radioOption[0].value)
        }
        this.getList()
        this.getDeptTreePost()
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 选择单选框
    getRadio() {
      this.getList()
    },
    getList() {
      this.loading = true
      this.queryParams.majorId = this.radio
      getPersonList(this.queryParams).then(response=>{
        this.loading = false
        this.tableDataList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          for (let j = 0; j < this.dict.type.BGQX.length; j++) {
            if(response.rows[i].bgqx == this.dict.type.BGQX[j].value) {
              this.tableDataList[i].bgqx = this.dict.type.BGQX[j].label
            }
          }

          for (let j = 0; j < this.dict.type.IS_OPENS.length; j++) {
            if(response.rows[i].isOpens == this.dict.type.IS_OPENS[j].value) {
              this.tableDataList[i].isOpens = this.dict.type.IS_OPENS[j].label
            }
          }

          for (let j = 0; j < this.dict.type.WJLX.length; j++) {
            if(response.rows[i].wjlx == this.dict.type.WJLX[j].value) {
              this.tableDataList[i].wjlx = this.dict.type.WJLX[j].label
            }
          }

          for (let j = 0; j < this.radioOption.length; j++) {
            if(response.rows[i].majorId == this.radioOption[j].value) {
              this.tableDataList[i].majorId = this.radioOption[j].label
            }
          }
        }
        this.total = response.total
      })
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    //关闭
    closeDelDialog() {
      this.$emit("closeDelDialog")
    },
    /** 查询部门下拉树结构 */
    getDeptTreePost() {
      deptTreeSelect().then(response => {
        this.deptOption = response.data;
      });
    },
    // 分配人员
    distribute(row) {
      this.roleName = undefined
      this.personalOpen = true
      this.personalTitle = '选择人员'
      this.processId = row.processId
      // 获取角色树
      findByDeptUserTree({deptId: this.deptId}).then(response=>{
        this.roleTree = response.data;
        // 重命名树结构中的字段
        this.roleTree.forEach(node => {
          this.appendUser(node);
        });
        // console.log(this.roleTree)
      });
    },
    appendUser(node) {
      if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
          this.appendUser(child);
        });
      }
      if (node.userChildren && node.userChildren.length > 0) {
        node.children = [...(node.children || []), ...node.userChildren];
        delete node.userChildren;
      }
    },
    // 角色树
    roleClick(data) {
      // console.log(this.roleTree, data)
      var flag = this.traverse(data, this.roleTree[0])
      console.log(flag)
      if(flag == false) {
        this.userId = data.id
        this.userName = data.label
      }
    },
    traverse(node, dept) {
      // console.log(node, dept)
      if(node.children != undefined) {
        this.$message({ message: '选择的数据是部门节点,请选择人员节点', type: 'warning' })
        return true;
      }
      if(dept.children) {
        for(let child of dept.children) {
          if(this.traverse(node, child)) {
            return true;
          }
        }
      }
      return false;
    },
    submitPersonal() {
      this.form = {
        processId: this.processId,
        userId: this.userId,
        projectExamplesId: this.queryParams.projectExamplesId
      }
      setUpUser(this.form).then(response=>{
        this.$modal.msgSuccess('分配人员成功')
        this.personalOpen = false
        this.getList()
      })
    },
    personalCancel() {
      this.personalOpen = false
    }
  }
}
</script>

<style scoped>

</style>
